var that;
class Tab {
    constructor() {
        that = this;
        // 获取的是固定的元素
        this.tabAdd = document.querySelector(".tabAdd");
        this.hd = document.querySelector(".hd");
        this.bd = document.querySelector(".bd");
        this.init();
    }
    updateNode() {
        this.lis = this.hd.getElementsByTagName("li");
        this.section = this.bd.getElementsByTagName("section");
        this.delete = this.hd.getElementsByClassName("delete");
        this.text = this.hd.getElementsByClassName("text");
    }
    init() {
        this.updateNode();
        this.tabAdd.onclick = this.add;
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].setAttribute("index", i);
            this.lis[i].onclick = this.tab;
            this.delete[i].onclick = this.del;
            this.text[i].ondblclick = this.change;
            this.section[i].ondblclick = this.change;
        }
    }
    clearClass() {
        for (var i = 0; i < that.lis.length; i++) {
            that.lis[i].className = "";
            that.section[i].className = "";
        }
    }
    tab() {
        that.clearClass();
        this.className = "active";
        var index = this.getAttribute("index");
        that.section[index].className = "active";
    }
    add() {
        var n = that.getRand(4, 10);
        that.clearClass();
        var li = document.createElement("li");
        li.innerHTML = `<span class="text">测试${n}</span><span class="delete">×</span>`;
        li.className = "active";
        that.hd.appendChild(li);

        var section = document.createElement("section");
        section.innerHTML = `测试${n}`;
        section.className = "active";
        that.bd.appendChild(section);

        that.init();
    }
    del(event) {
        event.stopPropagation();
        var index = this.parentElement.getAttribute("index");
        that.lis[index].remove();
        that.section[index].remove();
        that.init();
        if (!document.querySelector(".active")) {
            that.lis[index - 1].className = "active";
            that.section[index - 1].className = "active";
        }
    }
    change() {
        var str = this.innerText;
        this.innerHTML = `<input type="text" value="${str}">`;
        var ipt = this.firstElementChild;
        ipt.onblur = function () {
            this.parentElement.innerText = this.value;
        };
        ipt.onkeydown = function (e) {
            if (e.keyCode == 13) {
                ipt.blur();
            }
        };
    }

    getRand(min, max) {
        return parseInt(Math.random() * (max - min + 1) + min);
    }
}
var tab1 = new Tab();